<template>
  <div id="doctor">
    <div id="doc_bot">
      <div id="toggle-btn" @click="toggleSidebar">
        <i :class="isSidebarOpen ? 'el-icon-s-fold' : 'el-icon-s-unfold'"></i>
      </div>
      <el-row :gutter="20">
        <el-col :span="4" :offset="15" class="setup">
          <div class="user-info">
            <el-avatar :src="userAvatar" class="user-avatar"></el-avatar>
            <em class="user-name">{{ username + " 老师" }}</em>
          </div>
        </el-col>
        <el-col style="cursor: pointer;" :span="4" class="exit">
          <el-dropdown @command="handleCommand"  >
           <span class="el-dropdown-link">
            <em class="exit-text">更多</em>
            <i class="el-icon-arrow-down el-icon--right dropdown-arrow"></i>
          </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                <el-dropdown-item command="logout" @click="exit">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>
    </div>
    <div id="doc_main">
      <el-row>
        <el-col :span="isSidebarOpen ? 4 : 0" class="menu" :class="{'collapsed': !isSidebarOpen}">
          <!-- <div class="menu"> -->
          <el-row class="tac">
            <h5 class="menu_tit">
              <div class="logo-container">
                <img src="../assets/img/logo.jpg" alt="Logo" class="logo">
              </div>
            </h5>
            <el-col :span="18" :offset="6">
              <el-menu class="el-menu-vertical-demo" background-color="rgba(0,0,0,0)" text-color="#797979"
                active-text-color="#ffd04b" :router="true" :default-active="defaultActive">


                <el-menu-item index="/admin1/notice" @click="addComponent('首页')">
                  <i class="el-icon-location" ></i>
                  <span slot="title">首页</span>
                </el-menu-item>

                <el-menu-item index="/admin1/GuanliT/list" @click="addComponent('课程表管理')">
                  <i class="el-icon-tickets"></i>
                  <span slot="title">课程表管理</span>
                </el-menu-item>

                <el-menu-item index="/admin1/guanliyuan/list" @click="addComponent('失物招领管理')">
                  <i class="el-icon-s-shop"></i>
                  <span slot="title">失物招领管理</span>
                </el-menu-item>

                <el-menu-item index="/admin1/GuanYuedu/list" @click="addComponent('完满活动管理')">
                  <i class="el-icon-wind-power"></i>
                  <span slot="title">完满活动管理</span>
                </el-menu-item>
                <el-menu-item index="/admin1/GuanYueduCell/list" @click="addComponent('组织活动管理')">
                  <i class="el-icon-ship"></i>
                  <span slot="title">组织活动管理</span>
                </el-menu-item>
                <el-menu-item index="/admin1/guanliyuanead/list" @click="addComponent('通知模块管理')">
                  <i class="el-icon-phone-outline"></i>
                  <span slot="title">通知模块管理</span>
                </el-menu-item><el-menu-item index="/admin1/guanliyuaneadCell/list" @click="addComponent('组织通知管理')">
                <i class="el-icon-phone"></i>
                <span slot="title">组织通知管理</span>
              </el-menu-item>
                <el-menu-item index="/admin1/GuanUser/list" @click="addComponent('个人中心')">
                  <i class="el-icon-user"></i>
                  <span slot="title">个人中心</span>
                </el-menu-item>
              </el-menu>
            </el-col>

          </el-row>
          <!-- </div> -->
        </el-col>


        <el-col :span="isSidebarOpen ? 20 : 24" class="content">
          <!-- <div> -->
          <router-view></router-view>
          <!-- </div> -->
        </el-col>
        <!-- 右侧展示内容，根据菜单的点击进行路由跳转 -->
      </el-row>

    </div>
    <div id="selected-components">
      <span v-for="(component, index) in selectedComponents" :key="index" class="component-tag" @click="navigateToComponent(component)">
        {{ component }}
        <i class="el-icon-close" @click.stop="removeComponent(index)"></i>
      </span>
    </div>
    <!-- 定义页面尾部的退出登录部分 -->
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import { mapGetters } from 'vuex'
import { getLogout } from '@/http/user'
export default {
  data() {
    return {
      isSidebarOpen: true, // 初始状态为展开
      defaultActive: this.$route.path, // 初始化为当前路由路径
      selectedComponents: [] // 存储点击的组件名
    };
  },
  methods: {
    ...mapActions(['user/logout']),
    async exit() {

      this.$message.success('退出成功')
      this['user/logout']()
      this.$router.push('/login')
    },
   toggleSidebar() {
    this.isSidebarOpen = !this.isSidebarOpen;
  },
    handleCommand(command) {
      if (command === 'profile') {
        this.$router.push('/admin1/GuanUser/list');
      } else if (command === 'logout') {
        this.exit();
      }
    },
    addComponent(componentName) {
      if (!this.selectedComponents.includes(componentName)) {
        this.selectedComponents.push(componentName);
      }
    },
    removeComponent(index) {
      // 记录当前组件名
      const currentComponent = this.selectedComponents[index];
      // 移除组件
      this.selectedComponents.splice(index, 1);

      // 导航到前一个组件
      if (this.selectedComponents.length > 0) {
        // 导航到前一个组件
        const previousComponent = this.selectedComponents[index - 1] || this.selectedComponents[this.selectedComponents.length - 1];
        this.navigateToComponent(previousComponent);
      } else {
        // 如果没有组件了，导航到默认页面（例如首页）
        this.$router.push('/admin1/notice');
      }
    },
    navigateToComponent(componentName) {
      const routeMap = {
        '首页': '/admin1/notice',
        '课程表管理': '/admin1/GuanliT/list',
        '失物招领管理': '/admin1/guanliyuan/list',
        '完满活动管理': '/admin1/GuanYuedu/list',
        '组织活动管理': '/admin1/GuanYueduCell/list',
        '通知模块管理': '/admin1/guanliyuanead/list',
        '组织通知管理': '/admin1/guanliyuaneadCell/list',
        '个人中心': '/admin1/GuanUser/list'
      };
      const route = routeMap[componentName];
      if (route) {
        this.$router.push(route);
      }
    }
  },
  watch:{
    $route(to) {
      this.defaultActive = to.path; // 监听路由变化，更新 defaultActive
    },
  },
  computed: {
    ...mapGetters({
      username: 'user/getUsername',
      userRole: 'user/getUserRole',
      userAvatar : 'user/getUserAvatar',
    }),



  },
};
</script>
<style lang="scss" scoped>
#doctor {
  width: 100%;
  height: 100%;
  min-height: 800px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;


  #doc_main {
    width: 100%;
    //  height: 90%;
    background: #EEEFF4 !important;
    flex: 1;
  }
  .el-menu {
    border-right: solid 1px #2F4155;
  }
  .el-row {
    height: 100%;
  }

  .menu {
    height: 100%;
    background:#293B49;
    position: relative;
    transition: width 0.3s ease;
    &.collapsed {
      width: 60px !important; // 收起时的宽度
    }
    .menu_tit {
      height: 111px;
      font-size: 26px;
      color: #048FBA;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 2px solid #048FBA;

      .logo-container {
        display: flex;
        justify-content: center;
        margin-top: 20px;
      }
      .logo {
        width: 80px; /* 根据需要调整宽度 */
        height: 80px; /* 确保高度与宽度相同 */
        border-radius: 50%; /* 确保图片为圆形 */
        object-fit: cover; /* 确保图片覆盖整个容器 */
      }
    }

    .user {
      display: flex;
      width: 100%;
      height: 120px;
      border-top: 2px solid #797979;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 0px;

      em {
        margin-left: 14px;
      }
    }
  }

  .content {
    padding: 35px 50px;
    box-sizing: border-box;
    height: 100%;

    >div {
      height: 100%;
    }
  }

  #doc_bot {
    background:#048FBA;
    height: 27px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    #toggle-btn {
      position: absolute;
      top: -25px; /* 距离顶部的距离 */
      left: 190px; /* 距离左侧的距离 */
      z-index: 1000; /* 确保按钮在其他内容之上 */
      cursor: pointer; /* 鼠标悬停时显示为指针 */
      width: 100px; /* 设置按钮宽度 */
      height: 100px; /* 设置按钮高度 */
      display: flex; /* 使用 flex 布局 */
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
      color: white; /* 设置图标颜色 */
      transition: background-color 0.3s ease; /* 添加过渡效果 */
    }
    .el-row {
      display: flex;
      align-items: center;
    }
    .setup {
      padding-left: 80px !important;
    }
    .exit {
      padding-left: 100px !important;
    }
    .setup, .exit {
      display: flex;
      align-items: center;
    }

    .user-info, .exit-info {
      display: flex;
      align-items: center;
    }

    .el-avatar {
      margin-right: 10px;
    }

      em {
        font-size: 15px;
        color: #e7e2e2;
      }

    .el-dropdown-link {
      cursor: pointer;
      color: #333;
      display: flex;
      align-items: center;

      .exit-icon {
        margin-right: 5px;
      }

      .exit-text {
        margin-right: 5px;
      }

      .dropdown-arrow {
        transition: transform 0.3s ease;
      }

      &:hover .dropdown-arrow {
        transform: rotate(180deg);
      }
    }
  }


}
</style>
<style lang="scss">
.el-menu-item.is-active {
  color: #16dcb8 !important;
}

#selected-components {
  position: absolute;
  top: 82px; /* 距离顶部的距离 */
  left: 277px; /* 距离左侧的距离 */
  z-index: 1000; /* 确保按钮在其他内容之上 */
  padding: 5px;
  border-radius: 4px; /* 设置圆角 */
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1); /* 设置阴影 */
  display: flex; /* 使用 flex 布局 */
  flex-wrap: wrap; /* 允许换行 */
  gap: 5px; /* 设置间距 */
}
.component-tag {
  background-color: #23b99d; /* 设置背景颜色 */
  color: #fff; /* 设置文字颜色 */
  padding: 5px 10px; /* 设置内边距 */
  border-radius: 16px; /* 设置圆角 */
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
  cursor: pointer; /* 设置鼠标悬停时的指针 */
  transition: background-color 0.3s ease; /* 添加过渡效果 */
}

.component-tag:hover {
  background-color: #048FBA; /* 鼠标悬停时的背景颜色 */
}

.component-tag .el-icon-close {
  margin-left: 5px; /* 设置图标与文字之间的间距 */
  color: #ff4d4f; /* 设置图标的颜色 */
  transition: color 0.3s ease; /* 添加过渡效果 */
}

.component-tag .el-icon-close:hover {
  color: #ff1900; /* 鼠标悬停时图标的颜色 */
}
</style>
